<template>
  <div class="mainbody">
<van-sticky>

      <van-notice-bar left-icon="volume-o"  :scrollable="false">
    <van-swipe
      vertical
      
    class="notice-swipe"
    :autoplay="3000"
    :show-indicators="false"
    >
      <template v-for="item,index in notice">
        <van-swipe-item @click="shownotice(item.text)" :key="index">{{item.text}}</van-swipe-item>
      </template>
    </van-swipe>
  </van-notice-bar>
</van-sticky>

    <grid />

    <!-- 城市天气,纯粹填点内容占位置。 -->
    <CityWeather :city="city" :cityfullname="cityfullname" :citycode="citycode" @citychange="changecity"/>

    <lazy-scroll />
  </div>
</template>

<script>
import { Toast,Dialog } from 'vant'
import { Grid,CityWeather,LazyScroll } from './components/index'


export default {
  name:'MxinLis',
  data(){
    return {
      city:'双流区',
      cityfullname:'四川省/成都市/双流区',
      citycode:'510116',
      showPopover:false,
      noticetext:'',
      notice:[{text:'注意：因三方接口有调用次数限制，可能会出现异常，请联系我本人'},
      {text:'email:1309003763@qq.com'},
      {text:'前端+后端+服务器部署独立完成'},
      {text:'vue2.6+node(express)+aliyun(nginx)'},
      {text:'接口来源1.独立开发，2.百度智能云，3.腾讯SMS，4.聚合数据'}]
    }
  },
  components:{
    Grid,Dialog,CityWeather,LazyScroll
  },
  created(){
    
  },
  methods:{
    changecity(val){
      console.log("changecity",val);
      this.city = val.city;
      this.cityfullname = val.cityfullname;
      this.citycode = val.citycode;
    },
    shownotice(val){
      Dialog.alert({
        message: val,
      }).then(() => {
        // on close
      });
      
    }
  }
}
</script>

<style lang="scss" scoped>
  .mainbody{
    background-color: #e4e4e4;
  }

  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
</style>